<template>
  <el-container>
    <!-- 头部区域-->
    <el-header>
      <div>
        <img src="../../assets/logo.png" alt />
      </div>
    </el-header>
    <!-- 中间区域-->
    <el-main>
      <img src="../../assets/saying.png" alt />
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="3">
          <el-button type="primary" @click="superviseDialog=true;level=1">我是管理人员</el-button>
        </el-col>
        <el-col :span="1">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="ordinaryDialog=true;level=0">我是普通用户</el-button>
        </el-col>
      </el-row>
    </el-main>
    <!-- 底部区域-->
    <el-footer>
      <p>
        <a href="#">啾咕文学</a>
        <a href="#">啾咕文学</a>
        <a href="#">啾咕文学</a>
        <a href="#">啾咕文学</a>
        <a href="#">梦溪文坛</a>
        <a href="#">渺渺于怀</a>
        <a href="#">梦之谷</a>
        <a href="#">天生材</a>
        <a href="#">渺渺于怀</a>
        <a href="#">Turing</a>
        <a href="#">渺渺于怀</a>
        <a href="#">啾咕文学</a>
      </p>
      <p>ICP证号：@太阳系啾咕联盟</p>
    </el-footer>
    <!--管理用户
    用户登录的区别是传进关键字1或0
    -->
    <el-dialog title :visible.sync="superviseDialog" width="40%" center>
      <div class="header">
        <el-button :class="{activeBtn: loOrRe}" @click="loOrRe=true">登录账号</el-button>
        <el-button :class="{activeBtn: !loOrRe}" @click="loOrRe=false">注册账号</el-button>
      </div>
      <Login v-show="loOrRe" :level="level"></Login>
      <Register v-show="!loOrRe" @registerOk="registerOk" :level="level"></Register>
    </el-dialog>
    <!--普通用户-->
    <el-dialog title :visible.sync="ordinaryDialog" width="40%" center>
      <div class="header">
        <el-button :class="{activeBtn: loOrRe}" @click="loOrRe=true">登录账号</el-button>
        <el-button :class="{activeBtn: !loOrRe}" @click="loOrRe=false">注册账号</el-button>
      </div>
      <Login v-show="loOrRe" :level="level"></Login>
      <Register v-show="!loOrRe" @registerOk="registerOk" :level="level"></Register>
    </el-dialog>
  </el-container>
</template>

<script>
import Login from './login.vue'
import Register from './register.vue'
export default {
  data() {
    return {
      ordinaryDialog: false,
      superviseDialog: false,
      loOrRe: true,
      level: ''
    }
  },
  methods: {
    // 打开对话框
    openDialog(dialog, level) {
      this.dialog = true
      this.level = level
    },
    // 接收注册组件传的registerOk
    registerOk(data) {
      // this.username = data
      this.loOrRe = true
    }
  },
  components: {
    Login,
    Register
  }
}
</script>
<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  .el-header {
    width: 100%;
    height: 50px !important;
    background-color: #000;

    > div {
      img {
        width: 96px;
        height: 47px;
      }
    }
  }
  .el-main {
    align-items: center;
    width: 100%;
    height: 80% !important;
    background: url('../../assets/bkg1.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
    overflow-y: hidden;
    img {
      margin: 80px 25% 25px 25%;
    }
  }
  .el-footer {
    width: 100%;
    height: 50px !important;
    p {
      display: flex;
      justify-content: center;
      font-size: 12px;
      a {
        text-decoration: none;
        color: #000;
        margin: -5px 5px;
      }
    }
  }
  .el-dialog {
    position: relative;
    div.header {
      position: absolute;
      top: 10px;
      left: 25%;
      .el-button {
        position: relative;
        border-style: none;
        cursor: default;
      }
      .activeBtn:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20px;
        width: 60%;
        height: 2px;
        background-color: #007bff;
      }
      a {
        text-decoration: none;
        font-size: 16px;
        color: #000;
      }
    }
  }
}
</style>
